<!-- 投诉建议 -->
<template>
	<view class="complaint">
		<van-notice-bar left-icon="volume-o" text="此投诉为本小程序自有投诉渠道，非微信官方投诉渠道" />
		<!-- 分类推荐 -->
		<view class="content">
			<view>
				<text class="classification">分类推荐</text>
				<view class="head_list">
					<view
						:style="[{'color': activeCom == index ? '#fff': ''},{'backgroundColor': activeCom == index ? '#04bc16' : ''}]"
						@click="activeFun(index)" class="head_list_item" v-for="(item,index)  in comList">{{item}}</view>
				</view>

			</view>

			<!-- 反馈内容 -->
			<view style="margin-top: 60rpx;">
				<text style="font-weight: 600;font-size: 28rpx;">反馈内容</text>
				<!-- 反馈内容 输入框 -->
				<view style="margin-top: 25rpx;">
					<textarea placeholder-style="font-size: 25rpx" maxlength="300" style="width: 100%;"
						placeholder="请详细说明,以便于我们解决问题,您最多可以填写300个字。" v-model="complaintContent"></textarea>
				</view>

				<!-- 上传图片 -->
				<view class="image-box">
					<view v-for="(item,index) in picture1" :key="index" class="jh-w-200 jh-h-200 jh-solid jh-m-r-20 jh-m-b-20" style="position: relative;">
						<view  style="position: absolute; right: 0;">
						<u-icon name="close" color="#fff" size="28" @click="deleteImg(index)"
							></u-icon>
							</view>
						<image :src="item" mode="" class="jh-w-200 jh-h-200 jh-b-r-10"></image>

					</view>
					<view class="increase-iamge" @click="imgClick()">
						<view>
							<!-- <text class="increase-iamge-text" >+</text> -->
							<u-icon name="plus" size="40" color="#ccc"></u-icon>
							<text class="jh-m-t-20">添加照片</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 联系方式 -->
			<view style="margin-top: 100rpx;">
				<text style="font-weight: 600;font-size: 28rpx;">联系方式</text>
				<view style="margin-top: 30rpx;">
					<textarea placeholder-style="font-size: 25rpx" maxlength="50" style="width: 100%;"
						placeholder="请留下您的联系方式" v-model="complaintTelep"></textarea>
				</view>
			</view>


			<!-- 提交按钮 -->
			<view style="margin-top: 80rpx;">
				<button @click="addComplaint"
					style="background-color: #04bc16;color: #fff;border-radius: 10rpx;">提交</button>
			</view>
		</view>
	</view>

</template>

<script>
	import {
		addComplaint
	} from '../../api/my/index.js'
	export default {
		data() {
			return {
				comList: ['功能建议', 'Bug反馈', '订单退款', '其他问题'],
				activeCom: 0, //投诉建议分类推荐
				complaintContent: undefined, //反馈内容
				picture1: [], //图片
				complaintTelep: undefined, //联系方式
				fileList: [],
				imgList: [],

			}
		},
		onLoad() {},
		methods: {
			// 删除图片
			deleteImg(index) {
				this.picture1.splice(index, 1)
			},

			// 添加图片
			imgClick() {
				let _this = this
				uni.chooseImage({
						count: 3, //默认9
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album'], //从相册选择
						success: function(res) {
							for (let i = 0; i <= res.tempFilePaths.length - 1; i++) {
								if (_this.picture1.length < 4) {
									_this.picture1.push(res.tempFilePaths[i])
								}
						}

					}
				});
		},
		// 选择分类推荐
		activeFun(item) {
			this.activeCom = item
		},
		addComplaint() {
			if(!/^1[3456789]\d{9}$/.test(this.complaintTelep)||this.activeCom==undefined ||this.complaintContent==undefined || this.picture1==undefined ){
				uni.showToast({
					title: '请检查重新输入',
					icon: 'none'
				});
			}
			else{
			addComplaint({
				complaintCation: this.activeCom,
				complaintContent: this.complaintContent,
				picture1: this.picture1,
				complaintTelep: this.complaintTelep
			}).then(res => {
				console.log(res);
				if (res.code == 200) {
					uni.showToast({
						title: res.msg,
					})
					uni.switchTab({
						url: '/pages/my/my'
					})
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			})	
			}
			
		},
	}


	}
</script>

<style scoped>
	.complaint {
		background-color: #fff;
	}

	.content {
		padding: 15rpx 25rpx 0 25rpx;
	}


	.head_list {
		display: flex;
		margin-top: 30rpx;
	}

	.head_list_item {
		padding: 11rpx 13rpx;
		color: #333;
		font-size: 23rpx;
		background-color: #d7d7d7;
		border-radius: 30rpx;
		margin-right: 25rpx;
	}

	.classification {
		margin-top: 40rpx;
		font-weight: 600;
		font-size: 28rpx;
	}

	.increase-iamge {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 200rpx;
		height: 200rpx;
		border: 1px solid #ccc;
		border-radius: 5rpx;
	}

	.increase-iamge view {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		width: 100rpx;
		height: 100rpx;
		color: #ccc;
		font-size: 25rpx;
	}

	.increase-iamge-text {
		font-size: 90rpx;
		color: #ccc;
	}

	.image-box {
		display: flex;
		flex-wrap: wrap;
	}
</style>